<template>
    <div class="footerMusic" @click="setIsPlay">
        <span class="musicIcon run" v-if="isPlay"></span>
        <span class="musicIcon stop" v-if="!isPlay"></span>
    </div>
</template>
<style>
    .footerMusic {
        margin-top: 0%;
        position: fixed;
        height: 5%;
        right: 3%;
        top: 2%;
        z-index: 10000000000;
    }
    .footerMusic .run{
        width: 28px;
        height: 28px;
        border-radius: 14px;
        position: absolute;
        right: 6px;
        bottom: 2px;
        background: url("./img/music-running.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        animation: musicRun 2s linear infinite;
        -webkit-animation: musicRun 2s linear infinite;

    }
    .footerMusic .stop{
        width: 28px;
        height: 28px;
        border-radius: 14px;
        position: absolute;
        right: 6px;
        bottom: 2px;
        background: url("./img/music-stop.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;

    }
    @keyframes musicRun {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
</style>
<script>
import audioSrc from './audio/music_bg.mp3'
export default {
    data(){
        return {
            isPlay: false,
            audio:''
        }
    },
    mounted(){
        if(this.isWeiXin()){
            document.addEventListener("WeixinJSBridgeReady",() => {
                this.audio = new Audio()
                this.audio.loop = true
                this.audio.oncanplay = ()=>{
                    this.setIsPlay()
                }
                this.audio.src = audioSrc
                this.audio.load()
            })
        }else {
            this.audio = new Audio()
            this.audio.oncanplay = ()=>{
            }
            this.audio.src = audioSrc
            this.audio.load()
        }
    },
    methods:{
        setIsPlay:function () {
            this.isPlay = !this.isPlay
            if(!this.isPlay){
                this.audio.pause()
            }else {
                this.audio.play()
            }
        },
        isWeiXin(){
            //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
            var ua = window.navigator.userAgent.toLowerCase();
            //通过正则表达式匹配ua中是否含有MicroMessenger字符串
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        }
    }
}
</script>